In this final short lesson on the browser window module, let's see how to manage a Windows state in
between app launches.
For example, with the app open, I'll resize this main window and move it to the top left of my desktop.
Quit then to relaunch this from the node and watch command, we can simply type press enter.
And there our last window size and position is completely forgotten, with the window returning to its
original size of 1000 by 800 in the center of the screen, which is the default position.
This is to be expected as it's how we are creating the window.
So to add state management, then I'll turn to a simple NPM module, electron window state link in the
lesson resources, which states a library to store and restore window sizes and positions for your electron
up.
Install this module npm install saving as a production dependency which NPM will do by default anyway.
Electron window state.
Stop the watch command.
And done, I'll restart the watch script there.
We now have this module available for use in our app, so going by this very simple example configuration
here, let's add some basic Windows State management on our single app window.
Main window, first up, will need to require the module itself.
Const window state keeper equals require electron windows state.
Then in our create window function we can create a new window.
State manager from the module Letwin State equals window state keepa passing in a configuration object.
So this wind state instance will be responsible for managing the state of our main window.
And as part of its instantiation, we have to tell it the default position and size of the managed browser
window.
Should a previous state not exist.
Default width same as our Windows initial with 1000 and default height 800.
And in turn we can set the browser window to be created with the width and height provided by the window
state keepa setting its width to wind state dot width.
And height to win state dot, right, that takes care of our window size, but as part of the previous
state, will also want to supply an X and Y coordinate of where to create this window X being wind state
dot x.
And why win state dot, why we don't need to specify defaults for this X and Y coordinates in the windows
that keep a constructor, as this will default to the same center as the browser window, comment out
the dev tools as well and need that.
And finally, the very last step being to tell when state which windows state it will be storing alling
when state dot manage main window.
That's it.
I'll Save, which relaunches the app in its original state as it's only started to be managed as of
now.
Change this default window state with a resize and moving it to the top right corner.
Close this window as only closing a window or quitting the apple at state.
Save Main Duchesse again to reload the app and this time it relaunches back where we left it and in
that same position.